<template>
	<view class="game-container">
		<h1>单词拼写游戏</h1>

		<!-- 显示当前单词 -->
		<view class="word-container">
			<view v-if="currentWord" class="word-box">
				<image :src="currentWord.image" class="word-image" />
				<button class="audio-button" @click="playAudio">🔊</button>
				<!-- 小喇叭播放按钮 -->
			</view>

			<!-- 游戏开始按钮 -->
			<button v-if="!currentWord" @click="startGame">开始游戏</button>
		</view>

		<!-- 用户输入框及确认按钮 -->
		<view v-if="currentWord" class="input-container">
			<input v-model="userInput" type="text" class="user-input" placeholder="输入单词" :disabled="isGameOver" />
			<button v-if="!isGameOver" class="confirm-button" @click="checkAnswer">确认提交</button>
		</view>

		<!-- 显示分数 -->
		<view class="score-container" v-if="score >= 0">
			<p>分数: {{ score }}</p>
		</view>

		<!-- 游戏结束 -->
		<view v-if="isGameOver" class="game-over">
			<p>游戏结束！你的得分是: {{ score }}</p>
			<button @click="restartGame">重新开始</button>
		</view>

		<!-- 倒计时 -->
		<view v-if="timer > 0" class="timer-container">
			<p>倒计时: {{ timer }}秒</p>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			words: [
				{ word: 'Apple', audio: '/static/audio/apple.mp3', image: '/static/images/apple.png' },
				{ word: 'Banana', audio: '/static/audio/banana.mp3', image: '/static/images/banana.png' },
				{ word: 'Cat', audio: '/static/audio/cat.mp3', image: '/static/images/cat.png' },
				{ word: 'Dog', audio: '/static/audio/dog.mp3', image: '/static/images/dog.png' }
			],
			currentWordIndex: 0,
			score: 0,
			userInput: '',
			isGameOver: false,
			timer: 30, // 初始倒计时30秒
			timerInterval: null
		};
	},
	computed: {
		currentWord() {
			return this.words[this.currentWordIndex];
		}
	},
	methods: {
		// 播放音频
		playAudio() {
			const audio = new Audio(this.currentWord.audio);
			audio.play();
		},
		// 游戏开始
		startGame() {
			this.score = 0;
			this.currentWordIndex = 0;
			this.isGameOver = false;
			this.timer = 30; // 每次开始游戏倒计时重新设为30秒
			this.userInput = ''; // 清空输入框
			this.startTimer(); // 启动倒计时
		},
		// 开始倒计时
		startTimer() {
			this.timerInterval = setInterval(() => {
				if (this.timer > 0) {
					this.timer--;
				} else {
					this.endGame(); // 时间到游戏结束
				}
			}, 1000);
		},
		// 检查答案
		checkAnswer() {
			if (this.userInput.toLowerCase() === this.currentWord.word.toLowerCase()) {
				uni.showModal({
					title: '答对了！',
					content: '恭喜你答对了！',
					showCancel: false,
					success: () => {
						this.score += 10; // 答对加分
						this.moveToNextWord();
					}
				});
			} else {
				uni.showModal({
					title: '答错了！',
					content: '请再试一次！',
					showCancel: false,
					success: () => {
						this.moveToNextWord();
					}
				});
			}
		},
		// 跳到下一个单词
		moveToNextWord() {
			if (this.currentWordIndex < this.words.length - 1) {
				this.currentWordIndex++;
				this.userInput = ''; // 清空输入框
				this.playAudio(); // 自动播放下一个单词的音频
			} else {
				this.endGame(); // 如果所有单词都答完了，结束游戏
			}
		},
		// 结束游戏
		endGame() {
			clearInterval(this.timerInterval); // 停止倒计时
			this.isGameOver = true;
		},
		// 重新开始游戏
		restartGame() {
			this.startGame();
		}
	},
	// 页面加载时自动开始游戏（可选）
	mounted() {
		// 如果想要游戏页面一加载就自动开始，可以取消下面这行注释：
		// this.startGame();
	}
};
</script>

<style scoped>
.game-container {
	text-align: center;
	padding: 20px;
	background-color: #e3f2fd; /* 蓝色背景 */
	min-height: 100vh;
}

h1 {
	font-size: 36px;
	color: #42a5f5; /* 蓝色标题 */
	margin-bottom: 20px;
}

.word-container {
	margin-top: 20px;
}

.word-box {
	position: relative;
	display: inline-block;
	font-size: 24px;
	cursor: pointer;
	background-color: #ffffff; /* 白色背景 */
	padding: 10px;
	border-radius: 10px;
	transition: background-color 0.3s;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.word-box:hover {
	background-color: #bbdefb; /* 浅蓝色悬停效果 */
}

.word-image {
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
	border-radius: 10px;
}

.audio-button {
	position: absolute;
	top: 5px;
	right: 0px;
	background-color: #ff9800;
	color: white;
	border: none;
	border-radius: 50%;
	font-size: 18px;
	padding: 5px;
	cursor: pointer;
}

.audio-button:hover {
	background-color: #f57c00;
}

.input-container {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.user-input {
	font-size: 20px;
	padding: 10px;
	width: 60%;
	height: 50px;
	border-radius: 25px;
	border: 2px solid #42a5f5;
	margin-bottom: 20px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: border-color 0.3s ease;
}

.user-input:focus {
	border-color: #1e88e5; /* 深蓝色边框 */
	outline: none;
}

.confirm-button {
	background-color: #42a5f5; /* 蓝色按钮 */
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.confirm-button:hover {
	background-color: #1e88e5; /* 深蓝色悬停效果 */
}

button {
	background-color: #4caf50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

button:hover {
	background-color: #45a049;
}

.score-container,
.timer-container {
	margin-top: 20px;
	font-size: 18px;
	color: #333;
}

.game-over {
	margin-top: 20px;
	font-size: 18px;
	font-weight: bold;
	color: #d32f2f; /* 红色文本 */
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 24px;
}
</style>
